<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<!-- <div style="width: 100vw;height: 100vh;position: absolute;display: flex;align-items: center;justify-content: center;z-index: 999;" v-if="eggShow">
					<image src="@/static/img/gashaponImg/next.png" mode="widthFix" class="ani-img" :class="{'big':eggShow == true}"></image>
				</div> -->
				
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack" style="z-index: 999;"></image>
				<div class="img-box">
					<image src="../../../static/img/detailBg.png" mode="aspectFill" class="bg-img"></image>
				</div>
				<div class="detailImg-box">
					<div class="horn-box">
						<u-notice-bar :list="EggAdvertising" mode="vertical" bg-color="#1b1b1b" color="#fff"
							font-size="24" :volume-icon="false"></u-notice-bar>
						<!-- <image src="@/static/img/gashaponImg/horn.png" mode="aspectFill" class="image427" style="margin-right: 1.07vw;"></image>
						<span class="jiu-font24-fff" style="font-weight: 300;">藏友666抽中豪哥真的帅</span> -->
					</div>
					<div class="product-box">
						<image :src="productInfo.info.cover" mode="aspectFill" class="product-img"></image>
						<image src="../../../static/img/gashaponImg/productBottom.png" mode="widthFix"
							class="bottom-img"></image>
					</div>
				</div>
				<div class="info-box">
					<div class="info-left">
						<span class="jiu-font30-fff" style="font-size: 5.87vw;">{{ productInfo.info.spuTitle }}</span>
						<div class="infoBorder-box">
							<span class="info-border" v-for="item in productInfo.info.tags.split(',')">{{ item }}</span>
						</div>
						<span class="jiu-font24-555">{{ productInfo.info.desc }}</span>
						<div class="surplus-box">
							<span class="jiu-font24-555" style="color: #FFCE80;display: flex;">
								剩余次数：{{ eggCount.count }}次 <image src="../../../static/img/eggAdd.png" mode="aspectFill"
									class="image427" style="margin-left: 2.13vw;" @tap="addBtn"></image>
							</span>
							<span class="jiu-font24-555" style="margin-top: 1.07vw;">08月06日 13:14截止</span>
						</div>
					</div>
					<div class="info-right">
						<div class="info-top">
							<image src="@/static/img/gashaponImg/goBorder.png" mode="aspectFill" class="goBorder">
							</image>
							<image src="@/static/img/gashaponImg/go.png" mode="aspectFill" class="go" @tap="goBtn">
							</image>
						</div>
						<div class="info-bottom">
							<image src="@/static/img/gashaponImg/nextBorder.png" mode="heightFix" class="nextBorder">
							</image>
							<!--  -->
							<div :class="{'onMove':nextShow == true}">
								<image src="@/static/img/gashaponImg/next.png" mode="aspectFill"
									:class="{'next': true,'animate-radius': nextShow, 'big':eggShow}" v-if="eggShow">
								</image>
							</div>
						</div>
					</div>
				</div>
				<div style="background-color: #1b1b1b;padding-top: 6.4vw;padding-left: 5.33vw;padding-bottom: 8.53vw;">
					<div class="creator-box">
						<div class="creator-left">
							<image :src="productInfo.creator.avatar" mode="aspectFill" class="creator-header">
							</image>
							<div class="creator-info">
								<span class="jiu-font28-efe">
									{{ productInfo.creator.name }} <span
										class="creator-border jiu-font10-a97">创作者</span>
								</span>
								<span class="jiu-font24-555">ID：{{ productInfo.creator.id }}</span>
							</div>
						</div>
						<div class="creator-btn jiu-font24-000" @tap="guanzhu">关注</div>
					</div>
				</div>
				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 扭蛋介绍 ··</div>
				<div v-html="productInfo.info.detail"></div>
				<div class="bottomText-box">
					<span class="bottomText-title">关于数字藏品</span>
					<span
						class="bottomText-text">数字藏品是指使用区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，在保护其数字版权的基础上，实现真实可信的数字化发行、购买、收藏和使用。本平台的数字藏品是基于[元创链]技术协议发行的数字商品，每件藏品在[元创链]都有链上唯一标识，限量发行、不可篡改、不可复制。</span>
					<span class="bottomText-title">购买须知</span>
					<span
						class="bottomText-text">数字藏品为虚拟数字商品，并非实物，仅限经实名认证且年满18周岁的中国大陆用户购买。数字藏品的版权归发行方和原创者所有，除另外获得版权拥有者的书面同意外，用户不得将数字藏品用于任何商业用途。</span>
					<span
						class="bottomText-text">请您于10分钟内完成数字藏品支付，本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易、欺诈、或以任何其他非法行为进行使用。</span>
				</div>
			</ma-refresh>
		</ma-body>
		<u-popup v-model="exchangeShow" mode="bottom" border-radius="32">
			<div class="egg-box">
				<div class="egg-info">
					<image :src="productInfo.info.cover" mode="aspectFill" class="egg-image"></image>
					<div class="egg-bottom">
						<span class="jiu-font48-fff" style="font-size: 4.8vw;">扭蛋机会一次</span>
						<div class="egg-num">
							<image src="@/static/img/gashaponImg/stone.png" mode="aspectFill" class="image64"></image>
							<span style="color: #A972FF;font-size: 4.8vw;margin-left: 1.33vw;">{{ eggPrice }}</span>
						</div>
					</div>
				</div>
				<!-- <div class="num-box">
					<span class="jiu-font28-555" style="font-weight: 300;margin-top: 4.27vw;margin-bottom: 2.13vw;display: block;">数量</span>
					<div class="nums-box">
						<u-icon name="minus" color="#252525" size="20"></u-icon>
						<span class="num">1</span>
						<u-icon name="plus" color="#252525" size="25"></u-icon>
					</div>
				</div> -->
				<div class="gash-btn">
					<span @tap.stop="exchangeNums">立即兑换</span>
				</div>
			</div>
		</u-popup>
		<eggResults-card ref="getEgg"></eggResults-card>
		<getStone-card ref="stone"></getStone-card>
	</div>
</template>

<script>
	import eggResultsCard from '@/subPackB/components/eggResults-card/eggResults-card';
	import getStoneCard from '@/subPackB/components/getStone-card/getStone-card';
	export default {
		components: {
			eggResultsCard,
			getStoneCard
		},
		data() {
			return {
				exchangeShow: false,
				eggCount: {},
				eggShow: false,
				nextShow: false,
				productInfo: {},
				EggAdvertising: [],
				eggPrice: 0
			}
		},
		methods: {
			async goBtn() {
				// if()
				
				if(this.productInfo.limitTime.info.status == 'done'){
					uni.showModal({
						icon: 'none',
						title: '该活动已结束'
					})
					return;
				}
				
				let id = this.productInfo.skuList[0].skuId;
				this.$u.api.onProductEgg({}, id).then(res => {
					if (res.info.type == 'integral') {
						let obj = res.info;
						setTimeout(()=>{
							this.$refs.stone.open({
								obj,
								success: async() => {
									this.$ma.route.stoneMall()
								}
							})
						},1500)
					} else if (res.info.type == 'collection' || res.info.type == 'blind_box' || res.info.type == 'debris') {
						let obj = res.spuAggr;
						setTimeout(()=>{
							this.$refs.stone.open({
								obj,
								success: async() => {
									let id;
									if(res.info.type == 'collection') id = 0;
									else if(res.info.type == 'blind_box') id = 1;
									this.$ma.route.myCollection({
										currentIndex: id
									})
								}
							})
						},1500)
					}
				})
				// 动画
				this.eggShow = true;
				setTimeout(() => {
					this.nextShow = true;
				}, 800)
				setTimeout(() => {
					this.eggShow = false;
					// this.$refs.getEgg.open({
					// 	obj
					// });
					this.nextShow = false;
				}, 1500)
				await this.getProductEggCount();
			},
			addBtn() {
				this.exchangeShow = true;
			},
			async getProductDetail(id) {
				let res = await this.$u.api.getProductDetail({}, id);
				this.productInfo = res;
			},
			async getProductEggAdvertising() {
				let id = this.productInfo.skuList[0].skuId;
				let res = await this.$u.api.getProductEggAdvertising({}, id);
				this.EggAdvertising = res;
			},
			async getProductEggCount() {
				let id = this.productInfo.skuList[0].skuId;
				let res = await this.$u.api.getProductEggCount({}, id);
				this.eggCount = res;
			},
			async exchangeNums() {
				let data = {
					skuId: this.productInfo.skuList[0].skuId
				};
				this.$u.api.onProductEggExchange(data).then(async res=>{
					await this.getProductEggCount();
					this.$store.dispatch('user/getMyWallet');
					this.exchangeShow = false;
					uni.showToast({
						icon: 'none',
						title: '兑换成功'
					})
				}).catch(err=>{
					this.exchangeShow = false;
				})
				
			},
			guanzhu(){
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
			},
			async getExchangePrice(){
				let id = this.productInfo.skuList[0].skuId;
				console.log('这个id',this.productInfo)
				let res = await this.$u.api.getExchangePrice({} , id);
				this.eggPrice = res;
			}
		},
		async onLoad(e) {
			await this.getProductDetail(e.spuId);
			await this.getProductEggAdvertising();
			await this.getProductEggCount();
			this.$nextTick(()=>{
				this.getExchangePrice();
			})
		}
	}
</script>

<style lang="scss">
	.wscnph{
		width: 100%;
		height: 100%;
		display: block;
	}
	/deep/.u-notice-bar {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/deep/.u-news-item {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		width: 45.87vw !important;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes move {
		0% {
			// transform: translateX(0) translateY(0);
			transform: scale(1) translate(0);
		}

		100% {
			// transform:  translateX(-12vw) translateY(-18vw);
			transform: scale(3) translate(-12vw, -18vw);
		}
	}

	.onMove {
		animation: move 0.7s linear forwards;
	}

	@keyframes big {
		0% {
			transform: scale(0.3) rotate(0);
		}

		100% {
			transform: scale(1) rotate(180deg);
		}
	}

	.big {
		animation: big 0.6s;
		position: absolute;
		z-index: 999;
		width: 100%;
		height: 100%;
	}

	.animate-radius {
		display: block;
		animation: rotate 0.5s linear infinite;
	}

	.nextNext {
		animation: next 1s linear infinite;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.image64 {
		width: 6.4vw;
		height: 6.4vw;
	}

	.img-box {
		position: relative;

		.bg-img {
			width: 100%;
			height: 112.53vw;
			position: absolute;
		}
	}

	.detailImg-box {
		padding: 0 8.53vw;
		position: relative;
		padding-bottom: 3.1vw;

		.bottom-img {
			width: 100vw;
			display: block;
			position: absolute;
			height: 6.4vw;
			left: -8.53vw;
			top: 50.93vw;
			z-index: 99;
		}

		.horn-box {
			margin-top: 8.53vw;
			// display: inline-flex;
			align-items: center;
			padding-right: 4.53vw;
			background-color: #1b1b1b;
			border-radius: 4.53vw;
			z-index: 2;
			position: relative;
			margin-bottom: 4.27vw;
			width: 47.87vw;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.product-box {
			padding: 2.13vw;
			border-radius: 6.4vw 6.4vw 0 0;
			background-color: #1b1b1b;
			position: relative;

			.product-img {
				width: 100%;
				height: 57.07vw;
				border-radius: 6.4vw 6.4vw 0 0;
			}
		}
	}

	.info-box {
		display: flex;
		justify-content: space-between;
		padding-left: 5.33vw;
		padding-top: 6.4vw;
		// margin-top: 6.4vw;
		background-color: #1b1b1b;
		position: relative;

		.info-left {
			display: flex;
			flex-direction: column;

			.infoBorder-box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 2.13vw;
				margin-bottom: 4.27vw;

				.info-border {
					border: 1px solid #A972FF;
					border-radius: 1.07vw;
					font-size: 2.67vw;
					font-weight: 300;
					color: #A972FF;
					padding: 0 1.07vw;
					line-height: 4.27vw;
					margin-right: 2.13vw;
				}
			}

			.surplus-box {
				display: flex;
				flex-direction: column;
				margin-top: 8vw;
			}
		}

		.info-right {
			margin-right: 5.33vw;

			.info-top {
				position: relative;

				.goBorder {
					width: 21.33vw;
					height: 21.33vw;
				}

				.go {
					width: 12.8vw;
					height: 12.8vw;
					position: absolute;
					right: 4.27vw;
					top: 4.27vw;
				}
			}

			.info-bottom {
				position: relative;
				margin-top: 6.4vw;
				display: flex;
				justify-content: center;

				.nextBorder {
					height: 26.13vw;
				}

				.next {
					width: 100%;
					height: 100%;
				}

				div {
					position: absolute;
					bottom: 0;
					width: 12.8vw;
					height: 12.8vw;
					top: 10.67vw;
					left: 4.27vw;
					z-index: 999;
				}
			}
		}
	}

	.creator-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #000;
		padding: 3.2vw 5.33vw 3.2vw 4.27vw;
		border-radius: 12.8vw 0 0 12.8vw;

		.creator-left {
			display: flex;
			align-items: center;

			.creator-header {
				width: 10.67vw;
				height: 10.67vw;
				border-radius: 50%;
			}

			.creator-info {
				display: flex;
				flex-direction: column;
				margin-left: 2.13vw;

				.creator-border {
					padding: 0vw 1.33vw;
					border: 1px solid #A972FF;
					border-radius: 1.07vw;
					line-height: 4.27vw;
					margin-left: 4.27vw;
				}
			}
		}

		.creator-btn {
			padding: 0 5.33vw;
			line-height: 8.53vw;
			background-color: #A972FF;
			border-radius: 5.33vw;
		}
	}

	.bottomText-box {
		padding: 2.13vw 5.33vw 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.bottomText-title {
			color: #aaaaaa;
			font-size: 3.73vw;
			font-weight: 500;
			margin-top: 4.27vw;
			display: block;
		}

		.bottomText-text {
			color: #555555;
			font-size: 3.2vw;
			font-weight: 300;
			margin-top: 2.13vw;
		}
	}

	.egg-box {
		padding: 9.54vw 5.33vw 0 5.33vw;
		background-color: #1b1b1b;

		.egg-info {
			display: flex;

			.egg-image {
				width: 32vw;
				height: 32vw;
				background-color: #272727;
				border-radius: 5.33vw;
				margin-right: 3.2vw;
			}

			.egg-bottom {
				display: flex;
				flex-direction: column;

				.egg-num {
					flex: 1;
					display: flex;
					align-items: flex-end;
				}
			}
		}
	}

	.nums-box {
		margin-top: 1.87vw;
		display: flex;
		// border: 1px solid #EDEDED;
		border-radius: 2.13vw;

		/deep/.u-iconfont {
			width: 8.53vw;
			height: 8.53vw;
			display: flex;
			justify-content: center;
			background-color: #555555;
			font-weight: 300;
		}

		/deep/.uicon-minus {
			border-radius: 1.07vw 0 0 1.07vw;
		}

		/deep/.uicon-plus {
			border-radius: 0 1.07vw 1.07vw 0;
		}

		.num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 10.4vw;
			border-top: 1px solid #555555;
			border-bottom: 1px solid #555555;
			background-color: #1b1b1b;
			color: #FFCE80;
			font-weight: 300;
		}
	}

	.gash-btn {
		margin-top: 8.53vw;
		padding-left: 0 5.33vw;
		padding-bottom: calc(2.13vw + constant(safe-area-inset-bottom));
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(2.13vw + env(safe-area-inset-bottom));

		/* 兼容 iOS >= 11.2 */
		span {
			display: block;
			background-color: #A972FF;
			border-radius: 6.4vw;
			width: 100%;
			line-height: 12.8vw;
			text-align: center;
			font-size: 3.73vw;
			font-weight: 500;
			color: #000;
		}
	}
	/deep/.wscnph{
		width: 100%;
		height: 100%;
		display: block;
	}
</style>
